<!--
基础表格，具有常用的功能，用于博客列表的展示-->

<div class="row">
  <div class="col-xs-12">
    <div class="table-responsive">
      <table id="sample-table-1" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
          <th class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </th>
          <th>Domain</th>
          <th>Price</th>
          <th class="hidden-480">Clicks</th>

          <th>
            <i class="icon-time bigger-110 hidden-480"></i>
            Update
          </th>
          <th class="hidden-480">Status</th>

          <th></th>
        </tr>
        </thead>

        <tbody>
        <tr>
          <td class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </td>

          <td>
            <a href="#">ace.com</a>
          </td>
          <td>$45</td>
          <td class="hidden-480">3,330</td>
          <td>Feb 12</td>

          <td class="hidden-480">
            <span class="label label-sm label-warning">Expiring</span>
          </td>

          <td>
            <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
              <button class="btn btn-xs btn-success">
                <i class="icon-ok bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-info">
                <i class="icon-edit bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-danger">
                <i class="icon-trash bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-warning">
                <i class="icon-flag bigger-120"></i>
              </button>
            </div>

            <div class="visible-xs visible-sm hidden-md hidden-lg">
              <div class="inline position-relative">
                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-cog icon-only bigger-110"></i>
                </button>

                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                  <li>
                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </td>

          <td>
            <a href="#">base.com</a>
          </td>
          <td>$35</td>
          <td class="hidden-480">2,595</td>
          <td>Feb 18</td>

          <td class="hidden-480">
            <span class="label label-sm label-success">Registered</span>
          </td>

          <td>
            <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
              <button class="btn btn-xs btn-success">
                <i class="icon-ok bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-info">
                <i class="icon-edit bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-danger">
                <i class="icon-trash bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-warning">
                <i class="icon-flag bigger-120"></i>
              </button>
            </div>

            <div class="visible-xs visible-sm hidden-md hidden-lg">
              <div class="inline position-relative">
                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-cog icon-only bigger-110"></i>
                </button>

                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                  <li>
                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </td>

          <td>
            <a href="#">max.com</a>
          </td>
          <td>$60</td>
          <td class="hidden-480">4,400</td>
          <td>Mar 11</td>

          <td class="hidden-480">
            <span class="label label-sm label-warning">Expiring</span>
          </td>

          <td>
            <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
              <button class="btn btn-xs btn-success">
                <i class="icon-ok bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-info">
                <i class="icon-edit bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-danger">
                <i class="icon-trash bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-warning">
                <i class="icon-flag bigger-120"></i>
              </button>
            </div>

            <div class="visible-xs visible-sm hidden-md hidden-lg">
              <div class="inline position-relative">
                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-cog icon-only bigger-110"></i>
                </button>

                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                  <li>
                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </td>

          <td>
            <a href="#">best.com</a>
          </td>
          <td>$75</td>
          <td class="hidden-480">6,500</td>
          <td>Apr 03</td>

          <td class="hidden-480">
            <span class="label label-sm label-inverse arrowed-in">Flagged</span>
          </td>

          <td>
            <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
              <button class="btn btn-xs btn-success">
                <i class="icon-ok bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-info">
                <i class="icon-edit bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-danger">
                <i class="icon-trash bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-warning">
                <i class="icon-flag bigger-120"></i>
              </button>
            </div>

            <div class="visible-xs visible-sm hidden-md hidden-lg">
              <div class="inline position-relative">
                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-cog icon-only bigger-110"></i>
                </button>

                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                  <li>
                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td class="center">
            <label>
              <input type="checkbox" class="ace" />
              <span class="lbl"></span>
            </label>
          </td>

          <td>
            <a href="#">pro.com</a>
          </td>
          <td>$55</td>
          <td class="hidden-480">4,250</td>
          <td>Jan 21</td>

          <td class="hidden-480">
            <span class="label label-sm label-success">Registered</span>
          </td>

          <td>
            <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
              <button class="btn btn-xs btn-success">
                <i class="icon-ok bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-info">
                <i class="icon-edit bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-danger">
                <i class="icon-trash bigger-120"></i>
              </button>

              <button class="btn btn-xs btn-warning">
                <i class="icon-flag bigger-120"></i>
              </button>
            </div>

            <div class="visible-xs visible-sm hidden-md hidden-lg">
              <div class="inline position-relative">
                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-cog icon-only bigger-110"></i>
                </button>

                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                  <li>
                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
																				<span class="blue">
																					<i class="icon-zoom-in bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
																				<span class="green">
																					<i class="icon-edit bigger-120"></i>
																				</span>
                    </a>
                  </li>

                  <li>
                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
																				<span class="red">
																					<i class="icon-trash bigger-120"></i>
																				</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->
  </div><!-- /span -->
</div><!-- /row -->

<!-- inline scripts related to this page -->

<script type="text/javascript">
    jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
            "aoColumns": [
                { "bSortable": false },
                null, null,null, null, null,
                { "bSortable": false }
            ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                    .each(function(){
                        this.checked = that.checked;
                        $(this).closest('tr').toggleClass('selected');
                    });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
    })
</script>



